<template>
  <div class="product">
    <product-param :title="product.name">
      <template v-slot:buy>
        <button class="btn" @click="$router.push({path:'/clientService',query:{store_id:product.store_id,goodsid:$route.params.id}})">咨询商家</button>
      </template>
    </product-param>

    <Modal
      title="提示"
      sureText="查看购物车"
      cancelText="取消"
      btnType="3"
      modalType="middle"
      :showModal="showModal"
      @submit="goToCart"
      @cancel="showModal=false">
      <template v-slot:body>
        <p>商品添加成功！</p>
      </template>
    </Modal>

    <div class="content">
      <div class="main">
        <!-- 左侧商品轮播图 -->
        <div class="block">
          <el-carousel height="560px" v-if="image.length>1">
            <el-carousel-item v-for="item in image" :key="item.good_id">
              <img style="height:560px;" :src="item"/>
            </el-carousel-item>
          </el-carousel>
          <div v-if="image.length==1">
            <img
              style="height:560px;"
              :src="image[0]"
            />
          </div>
        </div>
        <!-- 左侧商品轮播图END -->
        <!-- 右侧内容区 -->
        <div class="product_content">
          <h1 class="name">{{ product.name }}</h1>
          <p class="intro">{{ product.subtitle }}</p>
          <p class="store">小米自营</p>
          <div class="price">
            <span>{{ product.price }}元</span>
            <span
              v-show="product.oldPrice != product.price"
              class="del"
            >{{ product.oldPrice }}元</span>
          </div>
          <!--保险-->
          <div class="service-box">
            <div class="service-item-box">
              <div class="title">选择小米提供的延长保修
                <a href="https://api.jr.mi.com/activity/accidentIns/?from=mishop&amp;insuranceSku=29660"
                   target="_blank">了解延长保修 &gt;</a>
              </div>
              <ul>
                <!--循环-->
                <li  :class="item.status==1?'active':''"   v-for="(item,index) in insurance" @click="chooseInsurance(item.insurance_id)">

                  <i class="iconfont icon-checkbox">
                    <input type="checkbox" style="border-radius: 50%;"
                           :checked="item.status"
                    >
                  </i>
                  <img data-src="//cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1592190760.53364271.jpg"
                       src="//cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1592190760.53364271.jpg"
                       lazy="loaded">
                  <div class="box">
                    <h3>{{ item.name }}<em>{{ item.price }}元</em></h3>
                    <div class="desc">{{ item.describe }}</div>
                    <div class="agreement-box">
                      <i class="iconfont icon-checkbox">
                        <input type="checkbox" :checked="item.status">
                      </i>我已阅读
                      <a
                        href="https://api.jr.mi.com/insurance/document/phone_accidentIns.html?insuranceSku=29660&amp;couponFrom=rule"
                        target="_blank">服务条款<span>| </span></a>
                      <a
                        href="https://api.jr.mi.com/insurance/document/phone_accidentIns.html?insuranceSku=29660&amp;couponFrom=question"
                        target="_blank">常见问题<!----></a>
                    </div>
                    <div class="price">{{ item.price }}元</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!--保险END-->
          <div class="pro-list">
            <div>
              <span class="pro-name">{{ product.name }}</span>
              <span class="pro-price">
              <span>{{ product.price }}元</span>
              <span
                v-show="product.oldPrice != product.price"
                class="pro-del"
              >{{ product.oldPrice }}元</span>
              </span>
            </div>
            <div v-for="list in buyList">
              <span class="pro-name">{{ list.name }}</span>
              <span class="pro-price">
              <span>{{ list.price }}元</span>
              <span
                v-show="list.oldPrice && list.oldPrice != list.price"
                class="pro-del"
              >{{ list.oldPrice }}元</span>
              </span>
            </div>
            <p class="price-sum">总计 : {{ sumPrice }}元</p>
          </div>
          <!-- 内容区底部按钮 -->
          <div class="button">
            <el-button class="shop-cart" @click="addCart()">加入购物车</el-button>
            <!--            <el-button class="like" @click="addCollect">喜欢</el-button>-->
          </div>
          <!-- 内容区底部按钮END -->
          <div class="pro-policy">
            <ul>
              <li>
                <i class="el-icon-circle-check"></i> 小米自营
              </li>
              <li>
                <i class="el-icon-circle-check"></i> 小米发货
              </li>
              <li>
                <i class="el-icon-circle-check"></i> 7天无理由退货
              </li>
              <li>
                <i class="el-icon-circle-check"></i> 7天价格保护
              </li>
            </ul>
          </div>
        </div>
        <!-- 右侧内容区END -->
      </div>
    </div>
  </div>
</template>
<script>
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import ProductParam from './../components/ProductParam'
  import Modal from "../components/Modal";
  import product from "./product";

  export default {
    name: 'product',
    components: {
      Modal,
      swiper,
      swiperSlide,
      // <ProductParam> 也可写成 <product-param>
      ProductParam
    },
    data() {
      return {
        showModal: false,
        showSlide: '', // 控制动画效果
        image: '',
        product: '', // 商品信息
        insurance: [], //保险列表
        insuranceIds: [], //保险列表id
        buyList: [], //已选保险列表
        swiperOption: {
          autoplay: true,
          slidesPerView: 3,
          spaceBetween: 30,
          freeMode: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
        }
      }
    },
    computed: {
      sumPrice() {
        let sum = this.product.price
        this.buyList.forEach((item) => {
          sum += item.price
        })
        return sum
      }
    },
    watch: {
      "$route": 'getProductInfo'    // 要watch route , 一旦发生变化，就调用 fetchData方法
    },
    created() {
      this.getProductInfo()
      this.getDetial()
    },
    methods: {
      getDetial(){

      },
      chooseInsurance(insurance_id) {
        this.insurance.forEach((item) => {
          if (item.insurance_id === insurance_id) {
            if (item.status) {
              let id1 = this.buyList.findIndex(item => {
                if (item.insurance_id == insurance_id) {
                  return true
                }
              })
              this.buyList.splice(id1, 1)
              item.status = 0
            } else {
              this.buyList.push(item)
              item.status = 1
            }
          }
        })
      },
      addCart(id) {
        let token;
        if (sessionStorage.getItem("token")) {
          token = sessionStorage.getItem("token")
        } else {
          token = 'null'
        }
        let username = sessionStorage.getItem("username")
        const iid = this.$route.params.id;
        this.insuranceIds = []
        this.getInsuranceIds()
        this.$axios.post('/carts/push', {
          token: token.replace(/^\"|\"$/g, ''),
          productId: iid,
          insuranceId:this.insuranceIds,
          username: username,
          storeid:this.product.store_id,
          select: true

        }).then((res) => {
          this.showModal = true
          this.$store.dispatch('saveCartCount', res.cartTotalQuantity)
        })
      },
      goToCart() {
        this.$router.push('/cart')
      },
      getInsuranceIds() {
        this.buyList.forEach((item)=>{
          this.insuranceIds.push(item.insurance_id)
        })
      },
      getImgObject() {
        this.image = this.product.image.split(',')
      },
      getInsuranceInfo() {
        this.$axios.get(`/insurance/getInsuranceByCategoryId`, {
          params: {
            'category_id': this.product.category_id,
          }
        }).then((res) => {
          this.insurance = res.list
        })
      },
      getProductInfo() {
        // 获取url中的参数32， 比如：/#/product/32
        const id = this.$route.params.id
        this.$axios.get(`/goods/getGoodInfoById`, {
          params: {
            'good_id': id,
          }
        }).then((res) => {
          this.product = res.data
          this.getImgObject()
          this.getInsuranceInfo()
        })
      },
      buy() {
        const id = this.$route.params.id
        this.$router.push(`/detail/${id}`)
      },
      closeVideo() {
        // 用这个方法是解决：v-show组件显示与动画不能执行完
        // 这里利用定时器，也设置成了0.6s完成slideUp上拉动画后，再将变量showSlide置空，从而隐藏组件
        this.showSlide = 'slideUp'
        setTimeout(() => {
          this.showSlide = ''
        }, 600)
      }
    }
  }
</script>
<style lang="scss">
  @import './../assets/scss/mixin.scss';

  .product {
    .product_content {
      .item-bg {
        background: url('https://cdn.jsdelivr.net/gh/ZTY18873242003/img/优雅的使用图床/spokesman.jpg') no-repeat center;
        height: 718px;
        text-align: center;

        h2 {
          font-size: 80px;
          padding-top: 55px;
        }

        h3 {
          font-size: 24px;
          letter-spacing: 10px;
        }

        p {
          margin-top: 21px;
          margin-bottom: 40px;

          a {
            font-size: 16px;
            color: #333333;
          }

          span {
            margin: 0 15px;
          }
        }

        .price {
          font-size: 30px;
          color: #333333;
        }
      }

      .item-bg-2 {
        background: url('https://cdn.jsdelivr.net/gh/ZTY18873242003/img/优雅的使用图床/product-bg-2.png') no-repeat center;
        height: 480px;
        background-size: 1226px 397px;
      }

      .item-bg-3 {
        background: url('https://cdn.jsdelivr.net/gh/ZTY18873242003/img/优雅的使用图床/product-bg-3.png') no-repeat center;
        height: 638px;
        background-size: cover;
      }

      .item-swiper {
        margin: 36px auto 52px;

        .desc {
          font-size: 18px;
          color: #333333;
          text-align: center;
        }

        img {
          width: 100%;
        }
      }

      .item-video {
        height: 1044px;
        background-color: #070708;
        margin-bottom: 76px;
        color: #FFFFFF;
        text-align: center;

        h2 {
          font-size: 60px;
          padding-top: 82px;
          margin-bottom: 47px;
        }

        p {
          font-size: 24px;
          margin-bottom: 58px;
        }

        .video-bg {
          background: url('https://cdn.jsdelivr.net/gh/ZTY18873242003/img/优雅的使用图床/gallery-1.png') no-repeat center;
          background-size: cover;
          width: 1226px;
          height: 540px;
          margin: 0 auto 120px;
          cursor: pointer;
        }

        .video-box {
          .overlay {
            @include position(fixed);
            background-color: #333333;
            opacity: .4;
            z-index: 10;
          }

          @keyframes slideDown {
            from {
              top: -50%;
              opacity: 0;
            }
            to {
              top: 50%;
              opacity: 1;
            }
          }
          @keyframes slideUp {
            from {
              top: 50%;
              opacity: 1;
            }
            to {
              top: -50%;
              opacity: 0;
            }
          }

          .video {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            width: 1000px;
            height: 536px;

            &.slideDown {
              animation: slideDown 0.6s linear;
            }

            &.slideUp {
              animation: slideUp 0.6s linear;
            }

            .icon-close {
              position: absolute;
              top: 20px;
              right: 20px;
              @include bgImg(20px, 20px, 'https://cdn.jsdelivr.net/gh/ZTY18873242003/img/优雅的使用图床/icon-close.png');
              cursor: pointer;
              z-index: 15;
            }

            video {
              width: 100%;
              height: 100%;
              object-fit: cover;
              outline: none;
            }
          }
        }
      }
    }

    button {
      margin-left: 10px;
    }
  }

  .service-box {
    .service-item-box {
      margin-top: 30px;

      .title {
        font-size: 18px;
        margin-bottom: 15px;
        line-height: 1;

        a {
          color: #ff6700;
          font-size: 14px;
          float: right;
          line-height: 18px;
        }
      }

      ul {
        margin: 0;
        padding: 0;
        width: 100%;

        li {
          border: 1px solid #e0e0e0;
          margin-top: -1px;
          background: #fff;
          cursor: pointer;
          padding: 30px 0;
          position: relative;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;

          .icon-checkbox {
            display: block;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            line-height: 36px;
            margin-left: 30px;
            float: left;
            font-size: 24px;
            text-align: center;
            cursor: pointer;
            margin-top: 10px;

            em {
              width: 24px;
              height: 24px;
              border-radius: 50%;
              border: 1px solid #b0b0b0;
              font-style: normal;
              line-height: 24px;
              color: #fff;
              font-size: 12px;
              vertical-align: middle;
              margin-top: -4px;
            }
          }

          img {
            width: 50px;
            height: 50px;
            margin-right: 15px;
            margin-left: 10px;
            float: left;
          }

          h3 {
            font-size: 18px;
            margin: 0 0 10px 0;

            em {
              font-style: normal;
              font-size: 14px;
              background: #ff6700;
              display: inline-block;
              padding: 2px 6px;
              border-radius: 20px;
              color: #fff;
              margin-left: 2px;
            }
          }

          .desc {
            margin: 0;
            padding: 0;
            font-size: 14px;
            height: 18px;
            color: #b0b0b0;
            width: 286px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top: 5px;
          }

          .agreement-box {
            margin-top: 5px;
            font-size: 14px;

            .icon-checkbox {
              float: none;
              margin: 0;
              width: 14px;
              height: 14px;
              line-height: 14px;
              margin-right: 5px;
              margin-top: 2px;
              border-radius: 2px;
              display: inline-block;
            }

            a {
              color: #ff6700;
              margin: 0 2px;
              display: inline-block;

              span {
                margin: 0 2px;
                display: inline-block;
              }
            }
          }

          .price {
            position: absolute;
            right: 20px;
            bottom: 28px;
            color: #757575;
          }
        }
      }

      .active {
        border-color: #ff6700;
        z-index: 2;

        .icon-checkbox {
          color: #fff;
        }

        h3 {
          color: #ff6700;
        }
      }

      .box {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
      }


    }
  }
</style>
<style lang="css">
  /* 主要内容CSS */
  .product .main {
    width: 1225px;
    display: flex;
    min-height: 560px;
    /*flex-direction: column;*/
    padding-top: 30px;
    margin: 0 auto;
  }

  .product .main .block {
    float: left;
    width: 560px;
    height: 560px;
  }

  .product .el-carousel .el-carousel__indicator .el-carousel__button {
    background-color: rgba(163, 163, 163, 0.8);
  }

  .product .main .product_content {
    float: left;
    margin-left: 25px;
    width: 640px;
  }

  .product .main .product_content .name {
    height: 30px;
    line-height: 30px;
    font-size: 24px;
    font-weight: normal;
    color: #212121;
  }

  .product .main .product_content .intro {
    color: #b0b0b0;
    padding-top: 10px;
    font-size: large;
  }

  .product .main .product_content .store {
    color: #ff6700;
    padding-top: 10px;
    font-size: large;
  }

  .product .main .product_content .price {
    display: block;
    font-size: 18px;
    color: #ff6700;
    border-bottom: 1px solid #e0e0e0;
    padding: 25px 0 25px;
  }

  .product .main .product_content .price .del {
    font-size: 14px;
    margin-left: 10px;
    color: #b0b0b0;
    text-decoration: line-through;
  }

  .product .main .product_content .pro-list {
    background: #f9f9fa;
    padding: 30px 60px;
    margin: 50px 0 50px;
  }

  .product .main .product_content .pro-list span {
    line-height: 30px;
    color: #616161;
  }

  .product .main .product_content .pro-list .pro-price {
    font-size: large;
    float: right;
  }

  .product .main .product_content .pro-list .pro-price .pro-del {
    margin-left: 10px;
    text-decoration: line-through;
  }

  .product .main .product_content .pro-list .price-sum {
    color: #ff6700;
    font-size: 24px;
    padding-top: 20px;
  }

  .product .main .product_content .button {
    height: 55px;
    margin: 10px 0 20px 0;
  }

  .product .main .product_content .button .el-button {
    float: left;
    height: 55px;
    font-size: 16px;
    color: #fff;
    border: none;
    text-align: center;
  }

  .product .main .product_content .button .shop-cart {
    width: 340px;
    background-color: #ff6700;
  }

  .product .main .product_content .button .shop-cart:hover {
    background-color: #f25807;
  }

  .product .main .product_content .button .like {
    width: 260px;
    margin-left: 40px;
    background-color: #b0b0b0;
  }

  .product .main .product_content .button .like:hover {
    background-color: #757575;
  }

  .product .main .product_content .pro-policy li {
    font-size: 16px;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    color: #b0b0b0;
  }

  .pro-list .pro-name {
    font-size: large;
  }
  /* 主要内容CSS END */
</style>
